/* pages/task_detl/task_detl.wxss */
.g-container {
  >.g-header {}

  >.g-main {
    padding: 6rpx 0 112rpx;

    >.part_wrap {
      margin: 32rpx 24rpx;
      padding: 28rpx 24rpx;
      border-radius: 12rpx;
      font-size: 30rpx;
      color: #303030;
      background: #fff;

      >.title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        // height: 76rpx;
        margin-bottom: 24rpx;
        padding-top: 4rpx;

        &:last-child {
          margin-bottom: 0;
        }

        &:not(:first-child) {
          // padding-top: 16rpx;
          padding-top: 28rpx;
          border-top: 2rpx dashed #e6e6e6;
        }

        >.left, >.label, >.val {
          font-size: 32rpx;
          font-weight: bold;
        }

        >.val {
          // color: #ff7373;
        }

        >.val_full {
          width: 100%;
          margin-top: 16rpx;
          line-height: 44rpx;
        }

        >.right {
          font-size: 28rpx;

          &.blue {
            color: #00a2ff;
          }
          &.red {
            color: #ff7373;
          }
          &.black {
            color: #4f4f4f;
          }
          &.yellow {
            color: #ffbd2c;
          }
        }
      }

      >.text {
        display: flex;
        margin: 20rpx 0;

        &:first-child {
          margin-top: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }

        &.driver {
          // align-items: center;
          padding-top: 20rpx;
          border-top: 2rpx dashed #e6e6e6;

          >.label {
            position: relative;
            &::before {
              content: '';
              position: absolute;
              z-index: -1;
              width: 4em;
              height: 4em;
              border-radius: 50%;
              background: rgba(0, 162, 255, 0.3);
            }

            >.img {
              display: block;
              width: 3.5em;
              height: 3.5em;
              margin: 0.25em;
              border-radius: 50%;
            }
          }

          >.val {
            display: flex;
            flex-direction: column;
            justify-content: center;

            >.text {
              margin-bottom: 8rpx;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }

        &.pnt {
          align-items: flex-start;

          >.val {
            flex: 1;
            display: flex;
            justify-content: space-between;

            >.addr {
              flex: 1;
            }

            >.iconfont {
              margin-left: 16rpx;
              font-size: 52rpx;
              color: #00a2ff;
            }
          }
        }

        >.label {
          z-index: 9;
          display: flex;
          width: 5em;
          margin-right: 12rpx;
          color: #999999;

          >.flag {
            position: relative;
            width: 10rpx;
            box-sizing: border-box;
            margin: 0 8rpx;
            margin-right: 24rpx;
            border: 2rpx solid #fff;
            border-bottom: 6rpx solid rgb(249, 219, 136);
            border-radius: 1000rpx;
            background: #00a2ff;
            overflow: visible;

            &::before {
              content: '';
              position: absolute;
              left: -10rpx;
              bottom: 0;
              transform: translateY(50%);
              z-index: -1;
              width: 26rpx;
              height: 14rpx;
              border-radius: 50%;
              background: rgb(249, 219, 136);
            }

            &::after {
              content: '';
              position: absolute;
              left: 0rpx;
              top: -2rpx;
              z-index: 2;
              width: 0;
              height: 0;
              border-left: 28rpx solid #00a2ff;
              border-top: 14rpx solid transparent;
              border-bottom: 14rpx solid transparent;
            }

            &.via {
              background: #45C861;
              &::after {
                border-left-color: #45C861;
              }
            }
            &.end {
              background: #ff7373;
              &::after {
                border-left-color: #ff7373;
              }
            }
          }
        }
      }

      >.trip {
        >.item {
          position: relative;
          margin-bottom: 8rpx;

          &.start {
            >.title >.pnt {
              &::before {
                background: rgba(0, 162, 255, 0.3);
              }

              &::after {
                background: rgb(0, 162, 255);
              }
            }
          }

          &.via {
            >.title >.pnt {
              &::before {
                background: rgba(69, 200, 97, 0.3);
              }

              &::after {
                background: rgb(69, 200, 97);
              }
            }
          }

          &.end {
            margin-bottom: 0;

            >.title >.pnt {
              &::before {
                background: rgba(255, 117, 117, 0.3);
              }

              &::after {
                background: rgb(255, 117, 117);
              }
            }

            >.val {
              &::before {
                opacity: 0;
              }
            }
          }

          >.title {
            display: flex;
            margin-bottom: 8rpx;

            >.pnt {
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 56rpx;
              margin-right: 8rpx;

              &::before {
                content: '';
                position: absolute;
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
              }

              &::after {
                content: '';
                position: absolute;
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
              }
            }

            >.label {
              flex: 1;
              font-weight: bold;
            }
          }

          >.val {
            position: relative;
            padding: 2rpx 0;
            padding-left: 64rpx;

            >.main {
              margin-top: 4rpx;
            }

            >.sub {
              margin: 12rpx 0 24rpx;
              color: #999;
            }

            &::before {
              content: '';
              position: absolute;
              left: 26rpx;
              width: 0;
              height: 100%;
              border-left: 2rpx dashed #cccccc;
              // background: pink;
            }
          }

          >.iconfont {
            position: absolute;
            top: 0;
            right: 0;
            padding: 6rpx;
            font-size: 48rpx;
            color: #00a2ff;
          }
        }
      }
    }
  }

  >.g-footer {
    display: flex;
    position: fixed;
    left: 28rpx;
    right: 28rpx;
    bottom: 0;
    z-index: 9;

    >.u-btn {
      margin: 0 20rpx 24rpx 20rpx;
      border-radius: 12rpx;
      width: 100%;
      &.btn_warning{

      }
    }
  }
}
